
import { addAnswerList, getAnswerDetails, getAnswerList, getAddCollection, getLaMiaRisposta } from "@/services";
import { IAnswerList, IAnswerDetails, ILaMiaRisposta } from "@/utils/questions";
import { IRouteComponentProps } from "@umijs/renderer-react";
import React, { useState, useEffect } from "react";
import { Button, Alert } from 'antd';
import styles from "./answerDetail.less"
import classNames from "classnames";
import Editor from 'for-editor';
import useStore from "@/context/useStore"
let xx = ""
const answerDetail: React.FC<IRouteComponentProps> = ({ location }) => {
    //测试
    let { question } = useStore()
    //评论列表
    let [answerList, setAnswerList] = useState<IAnswerList[]>([])

    let [AnswerDetails, setAnswerDetails] = useState<IAnswerDetails>({} as IAnswerDetails)
    //我的回答
    let [replyData, setReplyData] = useState<ILaMiaRisposta>({} as ILaMiaRisposta)
    //点击显示输入框
    let [showBox, setShowBox] = useState<boolean>(false)
    //INPUT    
    let [title, setTitle] = useState("")
    //点击收藏
    // let [addCollection, getCollection] = useState<boolean>(false)
    //问题回显详情 
    let answerId = location.query.answerId; //回显详情的id
    useEffect(() => {
        aaa()
    }, [answerId])

    function aaa() {
        //问题详情回显数据
        getAnswerDetails(answerId).then(res => {
            // console.log("问题数据",res)
            setAnswerDetails(res.data)
        })
        //问题评论列表数据
        getAnswerList(answerId).then((res) => {
            // console.log("评论数据", res)
            setAnswerList(res.rows)
        })
        // 我的问答数据
        getLaMiaRisposta().then(res => {
            setReplyData(res.data)
        })
    }
    //点击收藏
    // getcollection
    //把AnswerDetailsList push到一个空数组 
    let AnswerDetailsList = []
    AnswerDetailsList.push(AnswerDetails)
    return (
        <div className={styles.main_box}>

            <div className={styles.main}>
                <div className={styles.main_topTitle}> 问答 / 问答详情 </div>
                <div className={styles.mainBox}>
                    <div className={styles.main_left}>
                        {   //问题回显详情  
                            AnswerDetailsList.map((item, index) => {
                                return <div className={styles.main_con} key={index}>
                                    <h2>{item.questionTitle}</h2>
                                    <div className={styles.con_top}>
                                        <div>
                                            <div>
                                                <span><img src="http://111.203.59.61:8060/file_service/group1/M00/00/18/rBsCHWCect6AAI6AAAC1i-52NMk29.jpeg" alt="" /></span>
                                                <span>{item.userName}</span>
                                                <span>发布于{item.pushTime}</span>
                                            </div>
                                            <div>
                                                {item.questionContent}
                                            </div>
                                        </div>
                                        <div>
                                            <img src={xx} alt="" /><span>{item.answerCount}</span>
                                        </div>
                                    </div>
                                    <div className={styles.con_type}>
                                        {
                                            item.labels && item.labels.map((item1, index1) => {
                                                return <span key={index1}>{item1}</span>
                                            })
                                        }
                                    </div>
                                    <div className={styles.con_btn}>
                                        <Button type="primary" onClick={() => { setShowBox(true) }}>回答</Button>
                                        <Button type="primary">收藏</Button>
                                    </div>

                                </div>
                            })
                        }
                        {/* 评论区 */}
                        {
                            showBox ? <div className={styles.con_Inputs}>
                                <Editor placeholder="开始编辑..."
                                    value={title}
                                    onChange={(value) => { setTitle(value) }} />
                                <div className={styles.con_InputsBtn}>
                                    {/* 点击发布 */}
                                    <Button type="primary" onClick={() => {
                                        addAnswerList({ answerId, questionValue: title }).then(res => {
                                            if (res.code === 200) {
                                                alert(res.msg)
                                                //更新 评论列表 评论数量 回答问题数据
                                                aaa()
                                            }
                                            //清空输入框
                                            setTitle("")
                                        })
                                    }}>发布</Button>
                                </div>
                            </div> : null
                        }

                        <div className={styles.conBotton}>
                            <h2>全部回答({AnswerDetails.answerCount})</h2>
                            {
                                answerList.map((item) => {
                                    return <div key={item.replyId} className={styles.conItem}>
                                        <div>
                                            <div>
                                                <span><img src="http://111.203.59.61:8060/file_service/group1/M00/00/18/rBsCHWCect6AAI6AAAC1i-52NMk29.jpeg" alt="" /></span>
                                                <span>{item.userName}</span>
                                                <span>{item.replyDate}</span>
                                            </div>
                                            <div>
                                                <img src="http://111.203.59.61:8060/static/img/teacher_authentication.6b60f685.svg" alt="" />
                                            </div>
                                        </div>
                                        <div>
                                            {item.replyContext}
                                        </div>

                                    </div>
                                })
                            }
                        </div>
                    </div>
                    {/* 我的问答区 */}
                    <div className={styles.main_right}>
                        <h1><span className={styles.shu}></span> 我的问答</h1>
                        <div>
                            <img src="http://111.203.59.61:8060/file_service/group1/M00/00/18/rBsCHWCect6AAI6AAAC1i-52NMk29.jpeg" alt="" />
                            {AnswerDetails.userName}
                        </div>
                        <div>
                            <div className={classNames(styles.wen, styles.wenda)}>问</div>
                            <div>
                                提问了
                                <span className={styles.num}>{replyData.numberQuestions}</span>
                                 个问题
                                <span className={styles.num}>{replyData.numberReplies}</span>个人进行了回答
                            </div>
                        </div>
                        <div>
                            <div className={classNames(styles.da, styles.wenda)}>答</div>
                            <div>回答了<span className={styles.num}>{replyData.replyCount}</span>个问题</div>
                        </div>
                    </div>
                </div>

            </div>

        </div>
    )
}
export default answerDetail